<template>
  <div class="addmenu">
    <el-form
      ref="formRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="菜单名称" prop="title">
        <el-input
          v-model="ruleForm.title"
          type="text"
          autocomplete="off"
          size="large"
        />
      </el-form-item>
      <el-form-item label="上级菜单" prop="upmenu">
        <el-select
          v-model="value"
          class="m-2"
          placeholder="请选择"
          size="large"
          @change="setSelect(value)"
        >
          <el-option
            v-for="item in [{ title: '无上级菜单', id: 0, level: 0 }, ...list]"
            :key="item.id"
            :value="item.id"
            :label="item.title"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="前端名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          type="text"
          autocomplete="off"
          size="large"
          :disabled="route.query.id ? true : false"
        />
      </el-form-item>
      <el-form-item label="前端图标" prop="icon" type="text">
        <el-input
          v-model.number="ruleForm.icon"
          size="large"
          :disabled="route.query.id ? true : false"
        />
      </el-form-item>
      <el-form-item label="是否显示" type="text">
        <el-radio-group v-model="ruleForm.hidden" class="ml-4">
          <el-radio :label="0" size="large">是</el-radio>
          <el-radio :label="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort" type="text">
        <el-input v-model.number="ruleForm.sort" size="large" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
  menuListbyParentIdApi,
  addMenuApi,
  getMenuByIdApi,
  updateMenuApi,
} from "./api";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback();
  } else {
    callback();
  }
};
// 菜单列表
const list = ref<IMenuModel[]>([]);

const value = ref(0);

const ruleForm = reactive<IMenuAddParams>({
  title: "",
  name: "",
  icon: "",
  hidden: 0,
  sort: 0,
  id: 0,
  parentId: 0,
  level: 0,
});

const rules = reactive({
  title: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
  upmenu: [{ validator: validatePass2, trigger: "blur" }],
  name: [{ required: true, trigger: "blur", message: "请输入前端名称" }],
  icon: [{ validator: validatePass2, trigger: "blur" }],
  sort: [{ validator: validatePass2, trigger: "blur" }],
});

// 选择上级
const setSelect = (id: number) => {
  ruleForm.parentId = id;
  ruleForm.level = ruleForm.parentId !== 0 ? 1 : 0;
  // console.log(ruleForm.parentId, ruleForm.level);
};

const formRef = ref<FormInstance>();
// 提交按钮
const submitForm = () => {
  // 判断是否有携带id
  if (!route.query.id) {
    // 添加菜单
    // 发请求
    ElMessageBox.confirm("确定要添加菜单吗？", "添加菜单", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        addMenuApi(ruleForm).then((res) => {
          // console.log(res);
          router.push("/ums/menu");
          ElMessage.success("添加成功");
          formRef.value?.resetFields();
        });
      })
      .catch(() => {});
  } else {
    ElMessageBox.confirm("确定要修改菜单吗？", "修改菜单", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        updateMenuApi(ruleForm).then(() => {
          router.push("/ums/menu");
          ElMessage.success("修改成功");
          formRef.value?.resetFields();
        });
      })
      .catch(() => {});
  }
};

const params = reactive({
  parentId: 0,
  pageNum: 1,
  pageSize: 100,
});
// 请求菜单数据
menuListbyParentIdApi(params).then((res) => {
  if (res.code === 200) {
    list.value = res.data.list;
  }
  // 判断是否有携带id，有的话就是进入编辑页面
  if (route.query.id) {
    getMenuByIdApi(parseInt(route.query.id as string)).then((res) => {
      Object.assign(ruleForm, res.data);
      // console.log(ruleForm);
      // 解决下拉选框的显示问题
      if (ruleForm.level !== 0) {
        // console.log(123);
        const upobj = list.value.filter(
          (item) => item.id === ruleForm.parentId
        );
        // console.log(upobj);
        value.value = upobj[0].id;
      }
    });
  }
});
</script>
<style lang="less" scoped>
.addmenu {
  padding: 20px;
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.07);
}
</style>
